<template>
  <div>
    <div class="float-right d-none d-md-inline-block">
      <div class="btn-group mb-2" style="margin-bottom: 0.1rem !important;margin-right: 1rem;">
        <button @click="changebtnsel('昨天')" type="button" :class="{'active':btnsel=='昨天'}" class="btn btn-sm btn-light">昨天</button>
        <button @click="changebtnsel('前天')" type="button" :class="{'active':btnsel=='前天'}" class="btn btn-sm btn-light">前天</button>
        <button @click="changebtnsel('今天')" type="button" :class="{'active':btnsel=='今天'}" class="btn btn-sm btn-light">今天</button>
      </div>
      <el-dropdown trigger="click" @command="handleCommand">
        <span class="el-dropdown-link">
          {{sel}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="有效种子">有效种子</el-dropdown-item>
          <el-dropdown-item command="失效种子">失效种子</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="search-box">
      <div>客户数据供给状态走势</div>
    </div>
    <apexchart
      class="apex-charts"
      height="380"
      type="line"
      dir="ltr"
      :series="linewithDataChart.series"
      :options="linewithDataChart.chartOptions"
    ></apexchart>
  </div>
</template>
<script>
export default {
  data () {
    return {
      linewithDataChart: {
        chartOptions: {
            chart: {
                zoom: {
                    enabled: false
                },
                toolbar: {
                    show: false
                },
                animations: {
                  enabled: false
                },
            },
            colors: ['#556ee6', '#34c38f'],
            dataLabels: {
                enabled: true,
            },
            stroke: {
                width: [3, 3],
                curve: 'straight'
            },
            grid: {
                row: {
                    colors: ['transparent', 'transparent'], // takes an array which will be repeated on columns
                    opacity: 0.2
                },
                borderColor: '#f1f1f1'
            },
            markers: {
                style: 'inverted',
                size: 6
            },
            xaxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
                title: {
                    text: 'Month'
                }
            },
            legend: {
                position: 'top',
                horizontalAlign: 'right',
                floating: true,
                offsetY: -25,
                offsetX: -5
            },
            responsive: [{
                breakpoint: 600,
                options: {
                    chart: {
                        toolbar: {
                            show: false
                        }
                    },
                    legend: {
                        show: false
                    },
                }
            }],
        },
        series: [{
            name: "资讯",
            data: [26, 24, 32, 36, 33, 31, 33]
        },
        {
            name: "招标",
            data: [14, 11, 16, 12, 17, 13, 12]
        }
        ],
      },
      sel: '全部类型',
      btnsel: '今天',
    }
  },
  methods: {
    handleCommand(value){
      this.sel = value
    },
    changebtnsel(v){
      this.btnsel = v;
    },
  }
}
</script>
